<template>
  <basic-container>
   <avue-crud 
   :option="option"  
   ref="crud" 
   :search.sync="searchForm" 
   :data="treeData" 
   :permission="permissionList"
    @on-load="onLoad" 
    @tree-load="treeLoad"
    @refresh-change="refreshChange"
    @search-change="searchChange"
    @search-reset="searchReset"
   >
    <template slot-scope="{}" slot="serviceNoSearch">
      <select-page ref="searchSerSelect" label="serviceName" value="serviceNo" :select.sync="searchForm.serviceNo" :url="website.searchLink.serviceUrl" placeholder-text="服务商" filter-key="searchParam"></select-page>
    </template>
    <template slot-scope="{}" slot="orgNoSearch">
      <select-page ref="searchOrgSelect" label="serviceName" value="serviceNo" :select.sync="searchForm.orgNo" :url="website.searchLink.orgUrl" placeholder-text="机构" filter-key="searchParam"></select-page>
    </template>
   </avue-crud>
  </basic-container>
</template>

<script>
  import { mapGetters } from "vuex";
  import { getServiceTree } from "@/api/rb-oem/serviceTree/service_tree";
  import selectPage from "@/components/select-page/select-page";
  export default {
    components: {
      selectPage
    },
    data() {
      return {
        searchForm:{},
        option:{
          rowKey:'serviceNo',
          lazy: true,
          tip: false,
          columnBtn: false,     //右侧按钮显示条件
          addBtn: false,        //取消表格 新建/添加
          editBtn: false,       //行内编辑按钮
          delBtn: false,        //行内删除按钮
          viewBtn: true,        //查看按钮
          selection: true,      //搜索按钮
          border: true,
          index: true,
          // indexWidth: 80,       //序号列宽度
          indexLabel: '序号',   //序号列名称,    
          indexFixed: true,     //序号列是否冻结
          searchShow: true,     //首次加载是否显示搜索
          searchMenuSpan: 24,
          menuWidth:100,       //操作栏宽度
          labelWidth:130,      //弹出表单的标题的统一宽度
          searchLabelWidth: 110, //搜索框标题宽度
          column:[
          {
            label: "服务商编号",
            searchLabel: "服务商",
            prop: "serviceNo",
            type: 'select',
            addDisplay: false,
            editDisplay: false,
            search: true,
            span: 24,
            overHidden: true,
            width: 120,
          },{
            label:'服务商名称',
            prop:'serviceName',
            width: 200,
            type: "input",
            overHidden: true,
          },
          {
            label: "所属机构",
            prop: "orgNo",
            type: "select",
            dataType: "string",
            showColumn: false,
            search: true,
            filterable: true,
            hide: true,
            viewDisplay:false,
            rules: [
              {
                required: true,
                message: "请选择所属机构",
                trigger: "blur",
              },
            ],
          }
          ,{
            label:'直属服务商编号',
            prop:'directServiceNo',
            type: "input",
            overHidden: true,
            minWidth: 110
          },{
            label:'直属服务商名称',
            prop:'directServiceName',
            minWidth: 200,
            type: "input",
            overHidden: true,
          },{
            label:'类型',
            prop:'serviceType',
            search: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=service_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            type: "select",
            dataType: "number",
            overHidden: true,
            minWidth: 82
          },{
            label:'用户编号',
            prop:'userNo',
            search: true,
            type: "input",
            overHidden: true,
            minWidth: 100
          },{
            label:'联系人姓名',
            prop:'contactName',
            search: true,
            type: "input",
            overHidden: true,
            minWidth: 82
          },{
            label:'联系人电话',
            prop:'contactNumber',
            search: true,
            type: "input",
            overHidden: true,
            minWidth: 100
          },{
            label:'邮箱',
            prop:'email',
            // search: true,
            type: "input",
            overHidden: true,
            minWidth: 160
          },{
            label:'详细地址',
            prop:'address',
            // search: true,
            minWidth: 260,
            overHidden: true,
          },{
            label:'合同状态',
            prop:'cooperateState',
            search: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=cooperate_state",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            type: "select",
            dataType: "number",
            overHidden: true,
            minWidth:70
          },{
            label:'合作状态',
            prop:'isCooperate',
            search: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=is_cooperate",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            type: "select",
            dataType: "number",
            overHidden: true,
            minWidth:70
          },{
            label:'认证状态',
            prop:'isAuth',
            search: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=is_auth",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            type: "select",
            dataType: "number",
            overHidden: true,
            minWidth:70
          },{
            label:'分润状态',
            prop:'profitState',
            search: true,
            overHidden:true,
            dicUrl: "/api/blade-system/dict/dictionary?code=profit_state",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            type: "select",
            dataType: "number",
            minWidth:70
          }]
        },
        treeData: []
      };
    },
    watch: {
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.service_tree_add, false),
          viewBtn: this.vaildData(this.permission.service_tree_view, false),
          delBtn: this.vaildData(this.permission.service_tree_delete, false),
          editBtn: this.vaildData(this.permission.service_tree_edit, false)
        };
      },
      // ids() {
      //   let ids = [];
      //   this.selectionList.forEach(ele => {
      //     ids.push(ele.id);
      //   });
      //   return ids.join(",");
      // }
    },
    created() {
    },
    methods: {
      
      // 清空搜索栏目的值
      searchReset() {
        this.searchForm = {};
        this.onLoad(this.searchForm);
      },
      // 搜索
      searchChange(params, done) {
        this.searchForm = params;
        this.onLoad(this.searchForm);
        done();
      },
      // 刷新
      refreshChange() {
        this.onLoad(this.searchForm);
      },
      // 首次加载--初始化
      onLoad(params){
        getServiceTree(params).then(res => {
          this.treeData=res.data.data.records.map(item => {
            item.hasChildren=(item.hasChildren==0)?false:true;
            return {
              ...item
            }
          })
        });
      },
      // 点击 tree 加载
      treeLoad(tree, treeNode, resolve) {
        getServiceTree({parentServiceNo:tree.serviceNo}).then(res => {
          resolve(res.data.data.records.map(item => {
            item.hasChildren=(item.hasChildren==0)?false:true;
            return {
              ...item
            }
          }))
        });
      }
    }
  };
</script>

<style>
  .box {
    height: 800px;
  }
</style>
